<template>
  <div class="approval-wrapper dash-wrapper">
    <!-- 顶部导航栏 -->
    <navbar :sourceType="1" ref="child" />
    <div class="content-wrapper">
      <div class="flex">
        <div class="flex flex-col" style="width: 550px; flex-shrink: 0">
          <div class="white-bg dash-top br4" style="height: 100px; min-width: 550px">
            <div class="avatar-index-wrapper">
              <img :src="avatar" class="avatar-img" style="width: 60px; height: 60px" />
            </div>
            <div>
              <div class="mb16">
                <span class="font-3c3d43-18px">{{ getTimeDesc() }}，{{ name }}</span>
                <span v-if="roleName" class="font-6A66F6-12px" style="padding: 3px 10px; margin-bottom: 2px; margin-left: 8px">{{
                  roleName
                }}</span>
              </div>
              <span class="font-A6A8B4-14px">{{ chickenSentence }}</span>
            </div>
            <div class="flex1"></div>
            <div></div>
          </div>
          <div class="flex wp100 br4 flex-col white-bg mt16">
            <!-- 日历控件 -->
            <a-calendar
              :fullscreen="false"
              :header-render="headerRender"
              @panelChange="onPanelChange"
              @select="onSelect"
              v-model="currentCalad"
            >
              <template slot="dateFullCellRender" slot-scope="value" class="events">
                <a-popover v-if="getListData(value).length" v-show="carhide">
                  <template slot="content">
                    <div
                      v-for="(item, index) in getListData(value)"
                      :key="index"
                      style="font-size: 14px; color: #55565d; display: flex; justify-content: flex-start; align-items: center"
                    >
                      <div style="border-radius: 50%; width: 5px; height: 5px; background: var(--primary)" />
                      <div style="margin-left: 10px">{{ item.content }}</div>
                    </div>
                    <div style="font-size: 12px; color: #a6a8b4; cursor: pointer" @click="getMore(1)">查看更多</div>
                  </template>

                  <div style="cursor: pointer">
                    <div
                      :class="{
                        riliitem: true,
                        riliitemjiaqi: getGongli(value) === '休',
                        riliitemselect: getSelect(value),
                        riliitemcurrent: isToday(value)
                      }"
                    >
                      <div
                        :style="{
                          'font-size': '14px',
                          position: 'relative',
                          color: isToday(value)
                            ? '#ffffff'
                            : getGongli(value) === '休' || getSelect(value)
                            ? 'var(--primary)'
                            : getSun(value)
                            ? '#A6A8B4'
                            : '#55565D'
                        }"
                      >
                        {{ getGongli(value) }}
                      </div>
                    </div>

                    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
                      <div style="border-radius: 50%; height: 4px; width: 4px; background: var(--primary); position: relative" />
                      <div :style="{ 'font-size': '12px', position: 'relative', color: getSun(value) ? '#A6A8B4' : '#A6A8B4' }">
                        {{ getNongli(value) }}
                      </div>
                    </div>
                  </div>
                </a-popover>

                <div v-show="carhide" style="cursor: pointer" v-else>
                  <div
                    :class="{
                      riliitem: true,
                      riliitemjiaqi: getGongli(value) === '休',
                      riliitemselect: getSelect(value),
                      riliitemcurrent: isToday(value)
                    }"
                  >
                    <div
                      :style="{
                        'font-size': '14px',
                        position: 'relative',
                        color: isToday(value)
                          ? '#ffffff'
                          : getGongli(value) === '休' || getSelect(value)
                          ? 'var(--primary)'
                          : getSun(value)
                          ? '#A6A8B4'
                          : '#55565D'
                      }"
                    >
                      {{ getGongli(value) }}
                    </div>
                  </div>

                  <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
                    <div style="border-radius: 50%; height: 4px; width: 4px; background: #00000000; position: relative" />
                    <div :style="{ 'font-size': '12px', position: 'relative', color: getSun(value) ? '#A6A8B4' : '#A6A8B4' }">
                      {{ getNongli(value) }}
                    </div>
                  </div>
                </div>
              </template>
            </a-calendar>
            <!-- -----------↑↑↑↑↑↑↑↑------------------ -->
            <!-- 今日备忘和今日提醒 -->
            <div class="flex1 ml4 flex flex-col mt16">
              <div class="flex align-items-baseline mr20 ml20">
                <span class="font-3C3D43-32px">{{ currentDate }}</span>
                <span class="font-767885-32px ml12 flex1">{{ currentDay }}</span>
                <a-button icon="plus" type="primary" @click="addMemo">添加</a-button>
              </div>
              <div class="flex1 ml12 flex flex-col">
                <div v-if="tabsKey === 1" class="mr20" style="height: 250px; overflow-y: auto; overflow-x: hidden; margin-top: 12px">
                  <a-empty
                    v-if="(!noticeList || noticeList.length == 0) && (!memoDataList || memoDataList.length === 0)"
                    style="margin-top: 35px"
                  />
                  <a-row v-for="(item, indexx4) in noticeList" :key="item.id" :occ="indexx4">
                    <div
                      class="width99 height100 flex flex-col br4 p12 pos-relative"
                      style="
                        height: 75px;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: space-between;
                        cursor: pointer;
                        margin-bottom: 5px;
                      "
                      @click="todyClick(item)"
                    >
                      <div>
                        <div class="flex align-items-center">
                          <div
                            :class="[
                              !item.readStatus ? 'bac-6D69F71A-radius-2px' : 'bac-6D69F71A-radius-2px2',
                              !item.readStatus ? 'font-6A66F6-10px' : 'font-6A66F6-10px2',
                              'ph8',
                              'pv4'
                            ]"
                            style="min-width: 40px"
                          >
                            {{ item.title }}
                          </div>
                          <div class="font-55565D-14px maxlin1 ml8" style="max-width: 435px; word-wrap: break-word">{{ item.content }}</div>
                        </div>
                        <div class="flex align-items-center mt10px">
                          <img src="../../assets/indexImg/bank.png" alt class="w16px h16px" />
                          <span class="font-A6A8B4-14px ml8">{{ item.createUserName }}</span>
                        </div>
                      </div>

                      <img src="../../assets/indexImg/right@2x.png" style="width: 16px; height: 16px" />
                    </div>
                  </a-row>
                  <!-- <a-empty v-if="!memoDataList || memoDataList.length === 0" style="margin-top: 35px" /> -->
                  <a-row v-for="(item, index3) in memoDataList" :key="item.id" :occ="index3">
                    <a-popover>
                      <div slot="content" style="padding: 16px 12px; width: 350px; display: flex; flex-direction: column">
                        <span style="color: #55565dff; line-height: 18px" class="fs12 fw400">{{ item.content }}</span>
                        <div style="display: flex; justify-content: space-between; margin-top: 10px">
                          <span style="color: #a6a8b4; line-height: 21px" class="fs12 fw400">
                            {{ item.remindDate ? formatDate(item.remindDate, "d") : "" }}
                            {{ item.remindTime.substring(0, 5) }} 截止
                          </span>
                          <div style="display: flex">
                            <!-- TODO 透明度 -->
                            <a class="fs12 mr16 font-6a66f610" @click="changeComplete(item)">完成</a>
                            <a class="fs12 mr16 font-6a66f6" type="link" @click="editTheMemo(item)">编辑</a>
                            <a style="color: #ff7085ff; font-size: 12px" type="link" @click="deleteTheMemo(item)">删除</a>
                          </div>
                        </div>
                      </div>
                      <div class="width99 height100 flex flex-col br4 pos-relative" style="padding: 12px; margin-bottom: 5px">
                        <div class="flex align-items-center">
                          <span class="bac-FFF6DD-radius-2px font-F7B500-10px ph8 pv4" style="min-width: 40px">备忘</span>
                          <span class="font-55565D-14px maxlin1 ml8" style="max-width: 435px">{{ item.content }}</span>
                        </div>
                        <span class="font-A6A8B4-14px mt10px">
                          {{ item.remindDate ? formatDate(item.remindDate, "d") : "" }}
                          {{ item.remindTime.substring(0, 5) }} 截止
                          <span style="color: #ff7085; margin-left: 5px">●</span>
                          {{ item.completed === 1 ? "已完成" : item.isDelay === 1 ? "已延期" : "" }}
                        </span>
                        <!-- 备忘录标签 -->
                        <!-- <div
                          class="label-img flex align-items-center justify-content"
                          :class="item.completed === 1 ? 'bac-img-green' : item.isDelay === 1 ? 'bac-img-red' : ''"
                        >
                          <span class="font-fff-12px" style="margin-left: 7px">
                            {{ item.completed === 1 ? "已完成" : item.isDelay === 1 ? "已延期" : "" }}
                          </span>
                        </div>-->
                      </div>
                    </a-popover>
                  </a-row>
                </div>
                <!-- 查看更多 -->
                <div class="flex flex-col" style="margin-top: 5px; margin-bottom: 10px">
                  <span @click="getMore(2)" style="font-size: 14px; color: #ff7085; margin-bottom: 10px">
                    <img :src="delayed" style="width: 16px; height: 16px" />
                    <span style="margin-left: 10px">
                      {{
                        memoData.memoCountToday ? memoData.memoCountToday : 0 + memoData.memoCountDelay ? memoData.memoCountDelay : 0
                      }}个事项已延期
                    </span>
                  </span>
                  <div class="flex1 border-bottom-1px-e8e8e8"></div>
                  <div
                    class="flex align-items-center justify-content wp100"
                    style="margin-top: 10px; padding-right: 30px; cursor: pointer"
                    @click="getMore(1)"
                  >
                    查看更多事项
                    <a-icon type="right" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="width: calc(100vw - 550px - 48px); margin-left: 16px">
          <div class="flex" style="width: 100%">
            <div class="flex flex-col" style="width: 100%">
              <div class="flex" style="width: 100%">
                <div class="flex" style="width: 50%">
                  <QuickAccess class="flex1 wp100" @changeUrl="changeUrl" />
                </div>
                <div class="flex" style="width: 50%; margin-left: 16px">
                  <div class="br4 p24 wp100 bgc-white flex flex-col">
                    <div class="flex align-items-center">
                      <img src="../../assets/indexImg/yonggongdanwei@2x.png" alt class="width50px height50px" />
                      <div class="flex flex-col ml12">
                        <span class="font-3c3d43-18px">用工单位入口</span>
                        <span v-if="operationMenus.length > 0" class="font-A6A8B4-14px mt5px">
                          用工单位数量：{{ companyList.length }}
                        </span>
                      </div>
                    </div>
                    <!-- 历史点击记录 -->
                    <template v-if="operationMenus.length > 0">
                      <div
                        v-for="(item, index) in currentItems"
                        :key="index"
                        class="companyHover wp100 flex align-items-center br4 bag-f4f6fa p12-24px mt15px pointer"
                        @click="selectCompany(item)"
                      >
                        <span class="font-55565D-14px flex1">{{ item.name }}</span>
                        <div class="imgBag w16px h16px">
                          <img src="../../assets/indexImg/right@2xfff.png" alt class="w16px h16px imgBag1" />
                          <img src="../../assets/indexImg/right@2x.png" alt class="w16px h16px imgBag2" />
                        </div>
                      </div>
                      <!-- 切换其他 -->
                      <div class="wp100 flex align-items-center h48px bag-f4f6fa br24 ph24 mt15px switch-select">
                        <selectCompanyGroup ref="selectVal" class="mr20 wp100" showSelect="其他用工单位" @selectCompany="() => goEntry()" />
                        <img @click="handleClickChange" src="../../assets/indexImg/down.png" alt class="w16px h16px" />
                      </div>
                    </template>
                  </div>
                </div>
              </div>
              <div class="br4 flex-col p4 bgc-white mt16 wp100" style="padding-left: 15px; padding-right: 15px">
                <div class="flex align-items-center" style="margin-top: 10px; margin-left: 10px; margin-bottom: 20px">
                  <img src="@/assets/img/icon.png" alt class="width24px height24px" />
                  <span class="font-3C3D43-16px ml8">接单中心</span>
                </div>
                <a-tabs defaultActiveKey="jdzx">
                  <a-tab-pane key="jdzx" tab="接单中心">
                    <template v-if="list.length === 0">
                      <div class="flex" style="height: 540px; align-items: center; justify-content: center">
                        <a-empty style="margin-top: 100px" />
                      </div>
                    </template>
                    <template v-else>
                      <div style="height: 540px; overflow-y: auto">
                        <div v-for="(item, i) in list" :key="i">
                          <div class="fix-item-wrapper">
                            <ContentItem :options="item" @change="handleContent(item)" @received="onReceived" />
                          </div>
                        </div>
                      </div>
                    </template>
                    <div class="flex1 border-bottom-1px-e8e8e8" style="margin-top: 15px"></div>
                    <div
                      v-if="list.length > 0"
                      class="flex align-items-center justify-content wp100"
                      style="margin-top: 10px; margin-bottom: 5px; cursor: pointer"
                      @click="openJiedan"
                    >
                      查看更多接单
                      <a-icon type="right" />
                    </div>
                  </a-tab-pane>
                  <a-tab-pane v-show="site.socConfirm" key="sbjd" forceRender>
                    <span slot="tab">
                      社保接单
                      <a-badge :count="sbjdCount" :showZero="false" style="margin-top: -6px" />
                    </span>
                    <div class="ta-right mb16">
                      <a-button type="primary" @click="openJiedanzhongxin">批量反馈</a-button>
                    </div>
                    <ShebaoJiedanTable :sbjdCount.sync="sbjdCount" hidePage />
                    <div v-show="sbjdCount > 0" class="mv12 pointer ta-center" @click="openJiedanzhongxin">查看更多 ></div>
                  </a-tab-pane>
                </a-tabs>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 添加备忘 -->
      <a-modal
        :title="modalTitle"
        :visible="addMemoVisible"
        :confirm-loading="confirmLoading"
        @ok="confirmAddMemo"
        @cancel="addMemoVisible = false"
      >
        <a-form :form="memoForm">
          <a-form-item label>
            <a-textarea
              v-decorator="[
                'content',
                {
                  rules: [{ required: true, message: '请输入备忘' }]
                }
              ]"
              placeholder="请输入备忘"
              :auto-size="{ minRows: 5, maxRows: 10 }"
            />
          </a-form-item>
          <a-form-item label="用工单位" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <!-- companyId -->
            <a-select
              show-search
              :filter-option="filterOption"
              v-decorator="[
                'companyId',
                {
                  rules: [{ required: true, message: '请选择用工单位' }]
                }
              ]"
              placeholder="请选择用工单位"
              style="width: 300px"
            >
              <a-select-option v-for="(item, index) in companyList" :key="index" :value="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="提醒模式" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-radio-group
              v-decorator="[
                'remindType',
                {
                  initialValue: remindType,
                  rules: [{ required: true, message: '请选择提醒模式' }]
                }
              ]"
              @change="onRemindTypeChange"
            >
              <a-radio :value="1">固定日期提醒</a-radio>
              <a-radio :value="2">周期性提醒</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item :label="remindType === 1 ? '固定日期提醒' : '周期性提醒'" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-date-picker
              v-show="remindType === 1"
              v-decorator="[
                'remindDate',
                {
                  initialValue: initRemindDate,
                  rules: [{ required: true, message: '请选择提醒时间' }]
                }
              ]"
              :disabled-date="disabledDate"
            />
            <span v-show="remindType === 2">
              每月
              <a-select
                v-decorator="[
                  'remindMonthUnitValue',
                  {
                    initialValue: 1,
                    rules: [{ required: true, message: '请选择提醒时间' }]
                  }
                ]"
                :options="dayList"
                mode="multiple"
                style="width: 80px"
              />
              号
            </span>
            <a-time-picker
              v-decorator="[
                'remindTime',
                {
                  initialValue: initRemindTime,
                  rules: [{ required: true, message: '请选择提醒时间' }]
                }
              ]"
              format="HH:mm"
              style="margin-left: 24px"
            />
          </a-form-item>
        </a-form>
        <!-- 选择员工model 已隐藏 -->
        <ChooseMember
          :show.sync="chooseMemberVisible"
          :default-selected-keys="defaultSelectedKeys"
          :selected-list.sync="selectedList"
          @change="memberSelectedChange"
        />
      </a-modal>
      <!-- 确定删除 -->
      <a-modal v-model="deleteVisible" title="确定" @ok="handleOk">
        <p>确定删除该事项吗？</p>
      </a-modal>
      <!-- 确认完成 -->
      <a-modal v-model="confirmVisible" title="确定" @ok="handleConfirm">
        <p>确定已完成该事项吗？</p>
      </a-modal>
    </div>
  </div>
</template>

<script>
import Navbar from "@/layout/components/navbar";
import {
  getCurrentUserInfo,
  getSentences,
  addMemoConfigsReq,
  finishMemoConfigsReq,
  updateMemo,
  deleteMemo,
  getToDoMemo,
  getHomePageListAll,
  viewMission,
  getCalendar
} from "@/api/company/news";

import { listAllNotices, readItem } from "@/api/company/index";
import delayed from "@/assets/img/gantan.png";
import imgURL from "@/assets/img/rili.png";
import imgURLicon from "@/assets/img/riliicon.png";
import { mapState, mapGetters } from "vuex";
import selectCompanyGroup from "@/components/SelectCompany/dashboard";
import moment from "moment";
import chooseMember from "./components/chooseMember";
import QuickAccess from "./components/quickAccess";
import ContentItem from "./../shebao/shebaoJieDan/common/content-item2";
import ShebaoJiedanTable from "../shebao/jiedanzhongxin/table.vue";

const dayList = [];
for (let i = 1; i < 32; i++) {
  dayList.push({
    label: i + "",
    value: i + ""
  });
}

export default {
  components: {
    selectCompanyGroup,
    Navbar,
    QuickAccess,
    ContentItem,
    ChooseMember: chooseMember,
    ShebaoJiedanTable
  },
  data() {
    return {
      dayList,
      remindType: 1,
      sbjdCount: 0,
      list: [],
      // 姓名
      roleName: "",
      // 公司名
      companyName: "",
      // 公司id
      companyId: undefined,
      // 鸡汤背景
      backgroundImg: require("@/assets/img/chahua.png"),
      // 鸡汤
      chickenSentence: "",

      // 展示用工单位记录
      intersectionCompany: [],
      toDoList: [],
      monthly: moment().format("MM"),
      yearly: moment().format("YYYY"),
      // 日期
      currentDate: "",
      // 星期
      currentDay: "",
      // 提醒时间
      initRemindDate: null,
      // 提醒日期
      initRemindTime: null,
      // 备忘录数据
      memoData: {},
      // 延期警告图片
      delayed,
      imgURL,
      imgURLicon,
      deleteVisible: false,
      confirmVisible: false,
      addMemoVisible: false,
      confirmLoading: false,
      modalTitle: "添加备忘",
      memoForm: this.$form.createForm(this),
      isRemind: [
        { value: 0, label: "不提醒" },
        { value: 1, label: "提醒" }
      ],
      remindDisabled: false,
      currentCalad: undefined,
      defaultSelectedKeys: [],
      defaultSelectedNames: [],
      chooseMemberVisible: false,
      selectedList: [],
      memoDataList: [],
      nongliList: [],
      noticeList: [],
      marginList: [],
      color: "#FCAF4F",
      wanchengImg: require("../../assets/indexImg/wancheng.png"),
      wanchengRedImg: require("../../assets/indexImg/wanchengred.png"),
      selectOptions: [],
      tabsKey: 1,
      dateParams: moment(new Date()).format("YYYY-MM-DD"),
      currentRemindTime: moment(new Date()).format("HH:mm"),
      carhide: false
    };
  },
  computed: {
    ...mapGetters(["name", "avatar", "permissions_menu"]),
    ...mapState(["auth", "hr", "site"]),
    operationMenus() {
      const menus = this.permissions_menu.filter((item) => item.url !== "/dashboard" && item.level > 1);
      return menus.map((item) => item.url);
    },
    companyList() {
      return this.hr.companyList;
    },
    currentItems() {
      return this.site.currentItems;
    },
    siteId() {
      return this.auth.siteId;
    }
  },
  watch: {},
  created() {
    this.getToDoMemoList();
    this.getCurrentUserInfo();
    this.getSentences();
    this.initRemindDate = moment(new Date(), "YYYY-MM-DD");
    this.initRemindTime = moment(new Date(), "HH:mm");
    this.initDate(new Date());
    this.getMemoListAll();
    this.loadUserNotices(moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD"));
    this.currentCalad = moment();
  },
  methods: {
    onReceived() {
      this.getCurrentUserInfo();
    },
    onRemindTypeChange(evt) {
      this.remindType = evt.target.value;
    },
    getSun(value) {
      return moment(value).day() === 0 || moment(value).day() === 6;
    },
    getSelect(value) {
      return moment(value).format("YYYY-MM-DD") === moment(this.currentCalad).format("YYYY-MM-DD");
    },
    isToday(value) {
      return moment(value).format("YYYY-MM-DD") === moment(new Date()).format("YYYY-MM-DD");
    },
    handleClickChange() {
      this.$refs.selectVal.handleClickChange(true);
    },
    async todyClick(item) {
      const company = await this.$store.dispatch("hr/findCompanyItem", item.subjectId);
      const comyName = company ? company.name : null;
      // 标记已读
      if (!item.readStatus) {
        const h = [];
        h.push(item.id);
        readItem(h)
          .then(async (res) => {
            item.readStatus = true;
            this.$refs.child.initNotices(); // 刷新右上角铃铛
            // 保存用工单位信息
            this.$store.dispatch("onCompanyClick", {
              id: item.subjectId,
              name: comyName
            });
            if (item.toUrl) {
              this.gotoUrlPath(item.toUrl);
            } else {
              if (item.subjectId === "defaultTransferAccounts") {
                this.gotoPath(item.subjectId, item.title);
              } else {
                this.gotoPath(item.noticeTypeCode);
              }
            }
          })
          .catch((err) => {
            console.log("debug log --> ", err);
          });
      } else {
        // 保存用工单位信息
        this.$store.dispatch("onCompanyClick", {
          id: item.subjectId,
          name: comyName
        });
        if (item.toUrl) {
          this.gotoUrlPath(item.toUrl);
        } else {
          if (item.subjectId === "defaultTransferAccounts") {
            this.gotoPath(item.subjectId, item.title);
          } else {
            this.gotoPath(item.noticeTypeCode);
          }
        }
      }
    },
    gotoUrlPath(url) {
      this.$router.push(url);
    },
    handleContent(e) {
      const query = {
        paidancount: e.dispatchEmpCount,
        yiwanchengcount: e.completedCount,
        weiwanchengcount: e.unfinishedCount,
        yichangcount: e.abnormalCount,
        jiedanState: e.currentUserReceive,
        socDispatchId: e.id,
        title: moment(e.gmtCreate).format("YYYY年MM月") + e.missionName
      };
      localStorage.setItem("listjiedan", e.tableHead);
      const path = "/shebao/shebaoJieDan/shebao-add-list";
      this.$router.push({ path, query });
    },
    openJiedan() {
      this.$router.push({
        path: `/shebao/jiedan`
      });
    },
    openJiedanzhongxin() {
      this.$router.push({
        path: `/shebao/jiedanzhongxin`
      });
    },
    gotoPath(type, title) {
      switch (type) {
        case "turnOfficial":
          // return "人员转正";
          this.$router.push({
            path: "/staff/manger", // 员工异动
            query: { selectId: "2" }
          });
          break;
        case "preTransfer":
          // return "人员调岗";
          this.$router.push({
            path: "/staff/manger", // 员工异动
            query: { selectId: "5" }
          });
          break;
        case "resign":
          // return "人员离职";
          this.$router.push({
            path: "/staff/employee"
          });
          break;
        case "preResign":
          // return "人员离职";
          this.$router.push({
            path: "/staff/manger", // 员工异动
            query: { selectId: "3" }
          });
          break;
        case "salaryCardChange":
          // return "工资卡信息变更";
          this.$router.push({
            path: "/staff/employee"
          });
          break;
        case "preInduction":
          // return "人员入职";
          this.$router.push({
            path: "/staff/manger", // 员工异动
            query: { selectId: "1" }
          });
          break;
        case "induction":
          // return "人员入职";
          this.$router.push({
            path: "/staff/employee"
          });
          break;
        case "increment":
          // return "增减员确认";
          this.$router.push({
            path: "/shebao/shebaoManage" // 员工异动
          });
          var that = this;
          setTimeout(function () {
            that.$router.push({
              path: "/shebao/shebaoManage/shebaoZengJianY"
            });
          }, 700);
          break;
        case "approval":
          // return "审批通知";

          this.$router.push({
            path: "/approval/list"
          });
          break;
        case "contractExpires":
          // return "合同到期";
          this.$router.push({
            path: "/contract/elecontract"
          });
          break;
        case "defaultTransferAccounts":
          // return "一键发薪审核";
          if (title === "审批抄送通知") {
            this.$router.push({
              path: "/paySalary/examine?changeKey=4"
            });
          } else {
            this.$router.push({
              path: "/paySalary/examine?changeKey=1"
            });
          }

          break;
      }
    },
    // 查询个人信息
    getCurrentUserInfo() {
      getCurrentUserInfo().then((res) => {
        this.roleName = res.data.roleName;
        this.companyName = res.data.childCompanyName;
      });

      viewMission({
        companyId: this.companyId,
        pageNo: 1,
        pageSize: 6
      }).then((res) => {
        if (res.data && res.data.entities) {
          this.list = res.data.entities;
        }
      });
    },
    // 查询鸡汤
    getSentences() {
      getSentences()
        .then((res) => {
          this.chickenSentence = res.data.content;
        })
        .catch((err) => {
          console.log("ERROR", err);
        });
    },
    // 跳转
    goEntry(url) {
      if (url) {
        if (
          url === "/paySalary/applyFor" ||
          url === "/clientele/myClientele" ||
          url === "/recruitment/management" ||
          url === "/taxCalculate/management" ||
          url === "/shangyebaoxian"
        ) {
          // 快捷入口 个税招聘，发薪,crm点击跳页展示
          const { href } = this.$router.resolve({
            path: `${url}`
          });
          if (url === "/shangyebaoxian") {
            sessionStorage.setItem("shangbaoPageState", "customer");
          }
          window.open(href, "_blank");
        } else {
          this.$router.push(url);
          this.$store.commit("navtab/updateSelectedKeys", [url]);
          this.$store.commit("navtab/updateOpenKeys", [`/${url.split("/")[1]}`]);
        }
      } else {
        if (this.operationMenus.includes("/staff/employee")) {
          this.$router.push("/staff/employee");
          this.$store.commit("navtab/updateSelectedKeys", ["/staff/employee"]);
          this.$store.commit("navtab/updateOpenKeys", ["/staff"]);
        } else {
          this.$router.push(this.operationMenus[0]);
          this.$store.commit("navtab/updateSelectedKeys", [this.operationMenus[0]]);
          this.$store.commit("navtab/updateOpenKeys", [`/${this.operationMenus[0].split("/")[1]}`]);
        }
      }
    },
    // 本地查询
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    // 展示列表点击方法
    selectCompany(theCompany) {
      this.$store.dispatch("onCompanyClick", theCompany);
      this.goEntry(); // 跳转
    },
    privMonth() {
      this.currentCalad = moment(this.currentCalad)
        .month(moment(this.currentCalad).month() - 1)
        .startOf("month");
      this.onSelect(this.currentCalad);
    },
    nextMonth() {
      this.currentCalad = moment(this.currentCalad)
        .month(moment(this.currentCalad).month() + 1)
        .startOf("month");
      this.onSelect(this.currentCalad);
    },
    todyMonth() {
      this.currentCalad = moment();
      this.onSelect(this.currentCalad);
    },
    // 日历相关方法
    headerRender({ value, type, onChange, onTypeChange }) {
      const start = 0;
      const end = 12;
      const monthOptions = [];

      const current = value.clone();
      const localeData = value.localeData();
      const months = [];
      for (let i = 0; i < 12; i++) {
        current.month(i);
        months.push(localeData.monthsShort(current));
      }

      for (let index = start; index < end; index++) {
        monthOptions.push(
          <a-select-option class="month-item" key={`${index}`}>
            {months[index]}
          </a-select-option>
        );
      }
      const month = value.month();

      const year = value.year();
      const options = [];
      for (let i = year - 10; i < year + 10; i += 1) {
        options.push(
          <a-select-option key={i} value={i} class="year-item">
            {i}
          </a-select-option>
        );
      }
      return (
        <div class=" staff-top-item">
          <div
            class="backcolor"
            style={{
              borderTopRightRadius: "5px",
              borderTopLeftRadius: "5px",
              borderBottomLeftRadius: "5px",
              borderBottomRightRadius: "5px",
              width: "100%",
              heigth: "100%",
              margin: "20px"
            }}
          >
            <img style="position:absolute;  width:100%; height:20px;margin-top:81px;" src={imgURL} />
          </div>

          <div style={{ padding: "16px", marginTop: "15px", marginLeft: "40px", position: "absolute", width: "100%" }}>
            <div class="flex " style="width:100%;" justify="space-between">
              <div class="flex " style="width:70%;margin-top:20px;">
                <div style="color:#ffffff;font-size:22px;margin-right:30px;">
                  {this.yearly}年{this.monthly}月
                </div>
                <div
                  style="color:#ffffff;width:20px;height:24px;cursor: pointer; margin-top:5px;border-radius: 5px;border: 1px solid #ffffff;"
                  onClick={this.privMonth}
                >
                  <a-icon type="left" />
                </div>
                <div
                  style="color:#ffffff;font-size:16px;cursor: pointer; margin-top:5px; margin-left:10px;margin-right:10px;"
                  onClick={this.todyMonth}
                >
                  今天
                </div>
                <div
                  style="color:#ffffff;width:20px;height:24px;cursor: pointer; margin-top:5px;border-radius: 5px;border: 1px solid #ffffff;"
                  onClick={this.nextMonth}
                >
                  <a-icon type="right" />
                </div>
              </div>
              <div class="flex " style="width:10%;">
                <img style="position:absolute;  width:60px; height:60px;margin-top:10px;" src={imgURLicon} />
              </div>
            </div>
          </div>
        </div>
      );
    },
    // 日历点击事件
    onPanelChange(value, mode) {
      this.monthly = moment(value).format("MM");
      this.yearly = moment(value).format("YYYY");
      this.getToDoMemoList();
    },
    // 日历选择事件
    onSelect(value) {
      this.carhide = false;
      this.currentCalad = value;
      this.monthly = moment(value).format("MM");
      this.yearly = moment(value).format("YYYY");

      this.getToDoMemoList();
      this.loadUserNotices(moment(value).format("YYYY-MM-DD"), moment(value).format("YYYY-MM-DD"));
      this.currentRemindDate = value;
      this.selectDate = moment(value).format("YYYY-MM-DD");
      this.dateParams = this.selectDate;
      getHomePageListAll({
        companyId: this.companyId,
        remindDate: this.selectDate,
        remindTime: this.currentRemindTime
      }).then((res) => {
        this.memoData = res.data;
        this.memoListToday = res.data.memoListToday;
        this.memoListDelay = res.data.memoListDelay;
        this.memoDataList = [];
        this.memoListToday.forEach((item) => {
          this.memoDataList.push(item);
        });
        this.memoListDelay.forEach((item) => {
          item.isDelay = 1;
          this.memoDataList.push(item);
        });
      });
      this.initDate(value._d);
      this.initRemindDate = moment(value._d, "YYYY-MM-DD");
      this.initRemindTime = moment(value._d, "HH:mm");
    },
    getListData(value) {
      let listData;
      const valueList = [];
      valueList.push(value.date());
      const t = moment(value._d).format("YY-MM-DD").substring(0, 5);
      const now = this.yearly + "-" + this.monthly;
      let curr_t = moment(`${now}`).format();
      curr_t = moment(curr_t).format("YY-MM-DD").substring(0, 5);
      if (t === curr_t) {
        valueList.forEach((item) => {
          this.toDoList.forEach((item2) => {
            if (item === item2.day - 0) {
              listData = item2.memoList;
              return;
            }
          });
        });
      }
      return listData || [];
    },
    getNongli(value) {
      for (var i = 0; i < this.nongliList.length; i++) {
        if (this.nongliList[i].date && value.format("YYYY-MM-DD") === this.nongliList[i].date) {
          if (this.nongliList[i].holiday) {
            return this.nongliList[i].holiday;
          } else if (this.nongliList[i].lunar) {
            return this.nongliList[i].lunar.substr(this.nongliList[i].lunar.lastIndexOf("月") + 1, this.nongliList[i].lunar.length - 1);
          } else {
            return "";
          }
        }
      }
    },
    getGongli(value) {
      for (var i = 0; i < this.nongliList.length; i++) {
        if (this.nongliList[i].date && value.format("YYYY-MM-DD") === this.nongliList[i].date) {
          if (this.nongliList[i].dateType && this.nongliList[i].dateType === 3) {
            return "休";
          } else if (this.nongliList[i].day) {
            return this.nongliList[i].day;
          } else {
            return "";
          }
        }
      }
    },
    // 查看更多
    getMore(status) {
      if (this.currentItems.length > 0) {
        const d = this.currentItems[0];
        this.$store.dispatch("onCompanyClick", d);
      }
      this.$router.push({
        path: "/notice",
        query: { status: status }
      });
    },
    // 查询日历信息
    getToDoMemoList() {
      getToDoMemo({
        companyId: this.companyId,
        monthly: this.monthly,
        yearly: this.yearly
      }).then((rest) => {
        if (this.siteId) {
          getCalendar({
            month: this.monthly,
            year: this.yearly,
            siteId: this.siteId,
            "orders[0].desc": false,
            "orders[0].property": "date"
          })
            .then((res) => {
              this.nongliList = JSON.parse(JSON.stringify(res.data));
              this.toDoList = rest.data;
              this.carhide = true;
            })
            .catch((err) => {
              console.log("debug log --> ", err);
            });
        }
      });
    },
    // 初始化日历信息
    initDate(data) {
      var myDate = data;
      var month = myDate.getMonth() + 1; // 月
      var day = myDate.getDate(); // 日
      var days = myDate.getDay();
      switch (days) {
        case 1:
          days = "星期一";
          break;
        case 2:
          days = "星期二";
          break;
        case 3:
          days = "星期三";
          break;
        case 4:
          days = "星期四";
          break;
        case 5:
          days = "星期五";
          break;
        case 6:
          days = "星期六";
          break;
        case 0:
          days = "星期日";
          break;
      }
      this.currentDate = month + "月" + day + "日";
      this.currentDay = days;
    },
    // -----------↑↑↑↑↑↑↑↑------------------
    // 添加备忘
    addMemo() {
      this.remindDisabled = false;
      this.addMemoVisible = true;
      this.modalTitle = "添加备忘";
      this.memoForm.resetFields();
      this.defaultSelectedKeys = [];
      this.defaultSelectedNames = [];
      this.memoEmpDOList = [];
      this.initRemindDate = this.currentRemindDate ? moment(this.currentRemindDate, "YYYY-MM-DD") : moment(new Date(), "YYYY-MM-DD");
      this.initRemindTime = this.currentRemindDate ? moment(this.currentRemindDate, "HH:mm:ss") : moment(new Date(), "HH:mm");
      this.dateParams = this.selectDate ? this.selectDate : moment(new Date()).format("YYYY-MM-DD");
      this.currentRemindTime = this.timeParams ? this.timeParams : moment(new Date()).format("HH:mm:ss");
    },
    // 编辑备忘
    async editTheMemo(record) {
      const theDetail = await this.$request({
        url: `/hr/api/v1/memoInfos/${record.id}`
      })
        .then((res) => {
          return res.data;
        })
        .catch((err) => {
          console.log(err);
          return false;
        });
      if (!theDetail) {
        this.$message.error("记录详情加载失败");
        return false;
      }

      this.remindType = theDetail.remindType;
      this.remindDisabled = false;
      this.modalTitle = "编辑";
      this.addMemoVisible = true;
      this.currentMemo = theDetail;

      this.initRemindDate = moment(theDetail.remindDate, "YYYY-MM-DD");
      this.initRemindTime = moment(theDetail.remindTime, "HH:mm:ss");

      setTimeout(() => {
        this.memoForm.setFieldsValue({
          content: theDetail.content,
          remindBefore: theDetail.remindBefore,
          companyId: theDetail.companyId,
          remindNeed: theDetail.remindNeed ? 1 : 0,
          remindDate: moment(theDetail.remindDate).format("YYYY-MM-DD"),
          remindTime: moment(theDetail.remindTime, "HH:mm:ss"),
          remindType: theDetail.remindType,
          remindMonthUnitValue: theDetail.remindMonthUnitValue ? theDetail.remindMonthUnitValue.split(",") : 1
        });
      }, 0);
      if (theDetail.remindNeed === false) {
        this.remindDisabled = true;
      }
      if (theDetail.remindNeed === true) {
        this.remindDisabled = false;
      }
      this.defaultSelectedKeys = [];
      this.defaultSelectedNames = [];
      theDetail.memoEmpDOList.forEach((item) => {
        this.defaultSelectedKeys.push(item.empId);
        this.defaultSelectedNames.push(item.empName);
      });
    },
    // 删除备忘提示
    deleteTheMemo(record) {
      this.deleteVisible = true;
      this.currentMemo = record;
    },
    // 添加备忘接口
    confirmAddMemo(e) {
      var that = this;
      e.preventDefault();
      that.memoForm.validateFields((err, values) => {
        values.remindDate = moment(values.remindDate).format("YYYY-MM-DD");
        values.remindTime = moment(values.remindTime).format("HH:mm") + ":00";
        values.remindNeed = 1;
        values.remindBefore = 1;
        if (!err) {
          that.addMemoVisible = false;
          if (that.modalTitle === "添加备忘") {
            var memoInfoAddDTO = {
              ...values,
              remind_unit: "MONTH",
              memoEmpDOList: that.memoEmpDOList
            };
            if (memoInfoAddDTO["remindType"] === 2 && memoInfoAddDTO["remindMonthUnitValue"]) {
              memoInfoAddDTO["remindMonthUnitValue"] = memoInfoAddDTO["remindMonthUnitValue"].join(",");
            } else {
              delete memoInfoAddDTO["remindMonthUnitValue"];
            }
            addMemoConfigsReq(memoInfoAddDTO).then((res) => {
              that.$message.success("添加成功");
              that.getMemoListAll();
              this.getToDoMemoList();
            });
          } else {
            var memoInfoUpdateDTO = {
              ...values,
              id: that.currentMemo.id,
              remind_unit: "MONTH",
              memoEmpDOList: that.memoEmpDOList
            };
            if (memoInfoUpdateDTO["remindType"] === 2 && memoInfoUpdateDTO["remindMonthUnitValue"]) {
              memoInfoUpdateDTO["remindMonthUnitValue"] = memoInfoUpdateDTO["remindMonthUnitValue"].join(",");
            } else {
              delete memoInfoUpdateDTO["remindMonthUnitValue"];
            }
            updateMemo(memoInfoUpdateDTO).then((res) => {
              that.$message.success("编辑成功");
              that.getMemoListAll();
              this.getToDoMemoList();
            });
          }
        }
      });
    },
    changeComplete(memo) {
      if (!memo.completed) {
        this.confirmVisible = true;
      }
      this.currentMemo = memo;
    },
    disabledDate(current) {
      return current && current < moment().subtract(1, "days");
    },
    remindChange(e) {
      if (e === 0) {
        this.remindDisabled = true;
      }
      if (e === 1) {
        this.remindDisabled = false;
      }
    },
    memberSelectedChange(list) {
      this.memoEmpDOList = [];
      this.memoEmpDOList = list;
      this.memoEmpDOList.forEach((item) => {
        item.empName = item.name;
        item.empId = item.id;
        item.id = null;
      });
      this.defaultSelectedKeys = list.map((item) => item.id);
      this.defaultSelectedNames = list.map((item) => item.name);
    },
    handleOk() {
      var memoInfoIds = [];
      memoInfoIds.push(this.currentMemo.id);
      deleteMemo(memoInfoIds).then((res) => {
        this.$message.success("删除成功");
        this.deleteVisible = false;
        this.getMemoListAll();
      });
    },
    handleConfirm() {
      this.confirmVisible = false;
      if (this.currentMemo.completed === false) {
        var memoInfoUpdateDTO = {
          id: this.currentMemo.id,
          completed: true,
          companyId: this.currentMemo.companyId
        };
        finishMemoConfigsReq(memoInfoUpdateDTO).then((res) => {
          this.$message.success("编辑成功");
          this.getMemoListAll();
        });
      }
    },
    getMemoListAll(companyId) {
      getHomePageListAll({
        companyId: companyId,
        remindDate: this.dateParams,
        remindTime: this.currentRemindTime
      }).then((res) => {
        this.memoData = res.data;
        this.memoListToday = res.data.memoListToday;
        this.memoListDelay = res.data.memoListDelay;
        this.memoDataList = [];
        this.memoListToday.forEach((item) => {
          this.memoDataList.push(item);
        });
        this.memoListDelay.forEach((item) => {
          item.isDelay = 1;
          this.memoDataList.push(item);
        });
      });
    },
    loadUserNotices(gmtCreateStart, gmtCreateEnd) {
      const data1 = {
        moduleType: "hr"
      };
      listAllNotices(data1)
        .then(({ data }) => {
          this.noticeList = data.entities;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    changeUrl(url) {
      if (this.currentItems.length > 0) {
        const d = this.currentItems[0];
        this.$store.dispatch("onCompanyClick", d);
        this.$store.commit("navtab/updateSelectedKeys", [url]);
        this.$store.commit("navtab/updateOpenKeys", [`/${url.split("/")[1]}`]);
        this.goEntry(url);
      } else {
        // crm、薪资代发、招聘、商保、不需要判断用工单位
        if (
          url === "/paySalary/applyFor" ||
          url === "/clientele/myClientele" ||
          url === "/recruitment/management" ||
          url === "/taxCalculate/management" ||
          url === "/shangyebaoxian"
        ) {
          this.goEntry(url);
        } else {
          this.$notification["warning"]({
            message: "未查询到用工单位",
            description: "未查询到用工单位，请先创建用工单位"
          });
        }
      }
    },
    // 取交集
    intersection(a, b) {
      const newA = [];
      a.forEach((item) => {
        b.forEach((itemb) => {
          if (item.id === itemb.id) {
            newA.push(item);
          }
        });
      });
      return newA;
    },
    // 去重
    removalDuplicate(a, b) {
      const nA = a.slice();
      for (var i = 0; i < b.length; i++) {
        for (var j = 0; j < nA.length; j++) {
          if (nA[j].id === b[i].id) {
            nA.splice(j, 1);
            j = j - 1;
          }
        }
      }
      return nA;
    },
    getTimeDesc() {
      var hours = new Date().getHours();

      if (hours < 3) {
        return "夜深了";
      } else if (hours < 6) {
        return "凌晨了";
      } else if (hours < 8) {
        return "早上好";
      } else if (hours < 11) {
        return "上午好";
      } else if (hours < 13) {
        return "中午好";
      } else if (hours < 17) {
        return "下午好";
      } else if (hours < 19) {
        return "傍晚了";
      } else if (hours < 23) {
        return "晚上好";
      } else {
        return "夜深了";
      }
    },

    tabsChange(activeKey) {
      this.tabsKey = activeKey;
    },
    getNotesNum() {
      return this.memoData.memoCountToday && this.memoData.memoCountDelay
        ? this.memoData.memoCountDelay + this.memoData.memoCountToday
        : this.memoData.memoCountToday
        ? this.memoData.memoCountToday
        : this.memoData.memoCountDelay
        ? this.memoData.memoCountDelay
        : 0;
    }
  }
};
</script>

<style lang="scss">
@import "./styles/index.scss";
</style>
